<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      #main {
        margin: 100px;
        background: #abcdef;
        width: 520px;
        padding: 50px;
        border-radius: 20px 20px 20px 20px;
        box-shadow: 0 2px 12px #666666;
      }
      #box {
        background: #ff5511;
        margin: 50px;
        padding: 20px;
        font-size: 55px;
        font-weight: bold;
        border-radius: 15px 15px 15px 15px;
        box-shadow: 0 2px 12px #666666;
      }
      #start {
        width: 100px;
        font-size: 20px;
        font-weight: bold;
        background-color: green;
        border-radius: 8px 8px 8px 8px;
        box-shadow: 0 2px 12px #666666;
        cursor: pointer;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="box">汪哥翻牌子了</div>
      <button id="start">开 始</button>
    </div>

    <script>
      //选择botton按钮，点击之后div随时更换名字
      var stu = ['小二 ', '王老五'];
      var stratEle = document.getElementById('start');
      var boxEle = document.getElementById('box');
      var timer;
      stratEle.onclick = function () {
        if (timer) {
          clearInterval(timer);
          this.style.backgroundColor = 'green';
          this.innerText = '开始';
          timer = undefined
          return;

        }
        this.style.backgroundColor = 'red';
        this.innerText = '停止';

        timer = setInterval(function () {
          //盒子里面随机抽取名字
          var stuName = parseInt(Math.random() * stu.length);
          // 随机抽取的索引所对应的名字
          var newStu = stu[stuName];
          boxEle.innerText = newStu;
        }, 1000);
      };
    </script>
  </body>
</html>
